<template>
  <div
    :class="`custom-cell-container bg-red-50 shadow-sm ${
      type !== 'text-area' ? 'flex flex-row align-middle' : ''
    }`"
  >
    <van-field
      clearable
      clickable
      v-model="cp_value"
      :placeholder="placeholder"
      :required="required"
      :type="type"
      :isLink="isLink"
      :readonly="readOnly"
      :maxlength="maxlength"
      autosize
      :show-word-limit="cp_value.length > 0"
    >
      <template #left-icon>
        <div class="mr-2">
          <van-icon
            class-prefix="my-icon"
            :dot="required"
            size="24"
            :name="iconsUrl"
          />
        </div>
      </template>

      <template #input v-if="autocomplete">
        <el-autocomplete
          ref="autocompleteRef"
          class="form-autocomplete"
          v-model="cp_value"
          clearable
          :debounce="300"
          :fetch-suggestions="querySearchName"
          :placeholder="placeholder"
          @select="handleSelectSuggestions"
        />
        <!-- <text>123213</text>         @blur="autocompleteRef.close()" -->
      </template>
    </van-field>
  </div>
</template>
<script>
export default {
  name: "bindCustomerCell",
  emits: ["update:value", "onSelectSuggestions"],
  props: {
    iconsUrl: {
      typeof: String,
      defaultValue: "",
    },
    placeholder: {
      typeof: String,
      defaultValue: "请输入内容",
    },
    value: {
      typeof: String,
      defaultValue: "",
    },
    type: {
      typeof: String,
      defaultValue: "text",
    },

    maxlength: {
      typeof: Number,
      defaultValue: 50,
    },
    isLink: {
      typeof: Boolean,
      defaultValue: false,
    },
    required: {
      typeof: Boolean,
      defaultValue: false,
    },
    autocomplete: {
      typeof: Boolean,
      defaultValue: false,
    },

    readOnly: {
      typeof: Boolean,
      defaultValue: false,
    },

    querySearchName: {
      typeof: Function,
    },
  },
  methods: {
    handleSelectSuggestions(v) {
      this.$emit("onSelectSuggestions", v);
    }
  },

  computed: {
    cp_value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("update:value", val.trim());
      },
    },
  },
};
</script>

<style lang="less" scoped>

:deep .van-badge--dot {
  width: 4px;
  height: 4px;
}

:deep .van-field__clear {
  padding: 12px;
}

:deep .el-input__wrapper {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  padding: 0;
}

:deep .el-autocomplete {
    width: 100%;
}

.custom-cell-container {
  // type 类型为text-area时，设置最小高度
  --van-field-text-area-min-height: 100px;
  background-color: #f5f5f5;
  margin-top: 10px;
}


</style>
